<template>
	<div id="page">
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		
		<van-nav-bar class="navTop" :title="$t('header.Asset_details')" left-arrow=""  @click-left="navLeft" ></van-nav-bar>
		<div class="main">
			
			<div class="tab">
				<div @click="Tab(1)" :class="['li' , tab_i == 1 ? 'on':'']" >
					{{$t('page.Recharge_jl')}}
				</div>
				<div @click="Tab(2)" :class="['li' , tab_i == 2 ? 'on':'']" >
					{{$t('page.Withdrawal_jl')}}
				</div>
				<div :class="['line','btn-c-lan', tab_i == 2 ? 'on':'']"></div>
			</div>
			
			<div class="order" v-if="tab_i == 1 " >
				<img class="nodata" v-if="addData.length == 0" src="../../assets/nodata.png" >
				
				<div class="li" v-else v-for="item in addData">
					<div class="l">
						<p class="name">{{$t('page.Recharge')}}</p>
						<span class="tiem">{{item.date}}</span>
					</div>
					<div class="r add" >
						<!-- {{item.change_amount}} -->
						<p class="money">{{item.amount}}</p>
						<span class="tiem">{{$t('tis.czSuccess')}}</span>
					</div>
				</div>
			</div>
			<div class="order" v-else>
				<img class="nodata" v-if="delData.length == 0" src="../../assets/nodata.png" >
				<div class="li" v-else v-for="item in delData">
					<div class="l">
						<p class="name">{{$t('page.Withdrawal')}}</p>
						<span class="tiem">{{item.date}}</span>
					</div>
					<div class="r add" >
						<!-- {{item.change_amount}} -->
						<p class="money">{{item.amount}}</p>
						<span class="tiem">{{item.status}}</span>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	
	import Withdrawal from "../../components/Withdrawal.vue"
	import Recharge from "../../components/Recharge.vue"
	
	import {mapState} from "vuex";
	import store from '@/store'
	 import Web3 from "web3";
	export default {
		name:"record",
		components:{Withdrawal ,Recharge},
		data() {
			return {
				addData:[],
				delData:[],
				userData:{},
				
				tab_i : 1
			}
		},

		mounted(){
			this.tab_i = this.$route.query.tab;
			this.userData = this.$store.state.user;
			
			this.add_Data(this.$dapp.getAddress())
			this.del_Data(this.$dapp.getAddress())
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
				// this.$parent.UserInfo(this.$dapp.getAddress())
				this.userData = e
				
				this.add_Data(this.$dapp.getAddress())
				this.del_Data(this.$dapp.getAddress())
				this.$forceUpdate();
			},
			'$route':function(e){
				console.log(e)
				this.tab_i = this.$route.query.tab;
				this.$forceUpdate();
			}
		},
	
		methods: {
			
			Tab(e){
				this.tab_i = e;
			},
			  
			navLeft(){
				this.$router.go(-1);//返回上一层
			},
			
			async add_Data(e){
				if(!e){
					return
				}
				
				const { err, res } = await this.$request.get("/chss/order/deposit_records", {
					address:e
				});
				if (err === null) {
					this.addData = res;
				}
			},
			async del_Data(e){
				if(!e){
					return
				}
				const { err, res } = await this.$request.get("/chss/withdraw/withdraw_records", {
					address:e
				});
				if (err === null) {
					this.delData = res;
				}
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{overflow: scroll;}
	.tab{
		position: relative; z-index: 1;
		height: 80px; line-height: 80px;
		overflow: hidden; box-sizing: border-box;
		color: #FFF;
		border-bottom: 4px solid #268cfa;
		margin: 30px;
		display: flex;
		
		.li{
			flex:1; text-align: center;
			&.on{color: #333;}
		}
		
		.line{
			position: absolute; z-index: -1;
			 width: 50%;
			left: 0%; bottom: -10px;
			height: 90px; border-radius: 10px;
			transition:all 0.3s;
			-moz-transition:all 0.3s;
			-webkit-transition:all 0.3s;
			-o-linear-transition:all 0.3s;
			
			&.on{left: 50%;}
		}
		
	}
	
	
	.block{
		padding: 100px 0px;
		margin: 30px; border-radius: 20px;
		background: #1256d5;
		text-align: center;
		color: #cca837; font-size: 50px;
		
		.label{
			font-size: 28px; color:#3082ec;
			display: block;
		}
		
		.fbyn{
			font-size: 30px; color:#333;
			position: relative; top:50px;
			text-align: center;
			.btn{
				height: 80px; line-height: 80px; 
				border-radius: 50px; margin: 0px 30px;
				width: 250px;
				display: inline-block; 
				&.on{border: 3px solid #07ACCA; color:#FFF; box-sizing: border-box;}
			}
		}
	}
	
	.order{
		padding:0px 30px;
		.li{
			display: flex;
			border: 2px solid #07ACCA;
			margin: 30px 0px;
			border-radius: 10px;
			padding:20px 30px ;
			background: rgba(0 , 0 , 0 , 0.8);
			
			.l{
				flex: 1;
				.name{line-height: 50px; font-size: 30px; }
				.tiem{height: 30px; line-height: 30px;font-size: 24px; color:#aaa; }
			}
			.r{
				text-align: right;
				.money{line-height: 50px; font-size: 35px;color: #d6c934; }
				.tiem{height: 30px; line-height: 30px;font-size: 24px; color:#aaa; }
				// &.add{color: #d6c934;}
			}
			
		}
	}
	
	
</style>
